<template>
  <div class="login">
    <div class="phone"><img src="../assets/头部.png" alt="" /></div>
    <div class="headPortrait">
      <img src="../assets/编组@2x.png" alt="" />
    </div>
    <div class="userMsgBox">
      <div class="userName">
        <input type="text" placeholder="请输入姓名" v-model="userName" />
      </div>
      <div class="userPassword">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="userPassword"
        />
      </div>
      <div class="userPhone">
        <input type="password" placeholder="请输入手机号" v-model="userPhone" />
      </div>
    </div>
    <div class="btnBox">
      <button @click="registerBtn">注册</button>
      <div class="reBtn">
        <router-link to="/login">已有账号去登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { post } from "../utils/request.js";
// import { ref } from "vue";
// import router from "@/router";

// let userName = ref("");
// let userPassword = ref("");
// let userPhone = ref("");
// // 定义正则方法
// const regName = /^[\u4e00-\u9fa5]{0,}$/
// const regPassword = /^[a-zA-Z]\w{5,17}$/
// const regPhone = /^1[3456789]\d{9}$/

// const registerBtn = async () => {
//   let res
//   try {
//     res = await post("/register", {
//       name: userName.value,
//       password: userPassword.value,
//       phone: userPhone.value,
//     });
//   } catch(error) {

//   }
//   if (regName.test(userName.value)&&regPassword.test(userPassword.value)&&regPhone.test(userPhone.value)) {
//     showToast("注册成功");
//     router.push("/");
//   }

// };

// // 正则校验
// function regName(res.name){
//   const regName = /^[\u4e00-\u9fa5]{0,}$/
//   return regName.test(res.name)
// }
// regPassword(res.password){
//   const regPassword = /^[a-zA-Z]\w{5,17}$/
//   if (regName.test(res.password)) {
//     console.log('正确');
//   } else {
//     console.log('错误');
//   }
// }
// regPhone(){
//   const regPhone = /^1[3456789]\d{9}$/
//     if (
//         this.registerForm.account != "" &&
//         !regPhone.test(this.registerForm.account)
//       ) {
//         this.registerForm.account = "";
//       }
// }
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  .phone {
    width: 100%;
    height: 20px;
  }
  .headPortrait {
    width: 0.66rem;
    height: 0.66rem;
    background-color: pink;
    margin-top: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.4rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .userMsgBox {
    margin-bottom: 0.32rem;
    .userName,
    .userPassword {
      input {
        padding: 0.12rem 0.16rem;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        color: #000000;
        font-size: 0.16rem;
        border-radius: 0.06rem;
        background-color: #f9f9f9;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
    .userName {
      width: 2.95rem;
      height: 0.48rem;
      margin-bottom: 0.16rem;
    }
    .userPassword:not(:last-child) {
      width: 2.95rem;
      height: 0.48rem;
      margin-bottom: 0.16rem;
    }
  }
  .btnBox {
    button {
      width: 2.95rem;
      height: 0.48rem;
      border: none;
      border-radius: 0.04rem;
      background-color: #0091ff;
      color: #fff;
      font-size: 0.16rem;
      box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
    }
    .reBtn {
      margin-top: 0.16rem;
      display: flex;
      justify-content: center;
      a {
        font-size: 0.14rem;
        color: #000;
        opacity: 0.5;
      }
    }
  }
}
</style>
